<template>
  <Dialog
    class="teacher-dialog"
    :title="dialogTitle"
    v-model="dialogVisible"
    width="80%"
    top="50px"
    @closed="closed"
  >
    <div class="teacher-dialog-container">
      <el-tabs v-model="activeTab" class="mt-4 teacher-tabs">
        <el-tab-pane label="基本信息" name="basicInfo">
          <div class="tab-content-scroll">
            <TeacherInfoForm ref="teacherInfoFormRef" @success="handleSuccess" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="教育背景" name="teacherEducations">
          <div class="tab-content-scroll">
            <TeacherEducationsList :teacher-id="teacherId" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="工作经历" name="teacherWorkList">
          <div class="tab-content-scroll">
            <TeacherWorkListList :teacher-id="teacherId" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="工作调度" name="teacherJobList">
          <div class="tab-content-scroll">
            <TeacherJobListList :teacher-id="teacherId" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="专业技术资格" name="teacherCertificates">
          <div class="tab-content-scroll">
            <TeacherCertificatesList :teacher-id="teacherId" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="奖励情况" name="teacherRewards">
          <div class="tab-content-scroll">
            <TeacherRewardsList :teacher-id="teacherId" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="惩处情况" name="teacherPunishments">
          <div class="tab-content-scroll">
            <TeacherPunishmentsList :teacher-id="teacherId" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import TeacherInfoForm from './components/TeacherInfoForm.vue'
import TeacherCertificatesList from './components/TeacherCertificatesList.vue'
import TeacherEducationsList from './components/TeacherEducationsList.vue'
import TeacherJobListList from './components/TeacherJobListList.vue'
import TeacherPunishmentsList from './components/TeacherPunishmentsList.vue'
import TeacherRewardsList from './components/TeacherRewardsList.vue'
import TeacherWorkListList from './components/TeacherWorkListList.vue'

const dialogVisible = ref(false)
const dialogTitle = ref('教师档案')
const activeTab = ref('basicInfo') // 默认显示基本信息标签页
const teacherId = ref<number | undefined>(undefined)
const teacherInfoFormRef = ref() // 教师基本信息表单引用

// 打开弹窗方法
const open = (type: string, id?: number) => {
  dialogVisible.value = true
  teacherId.value = id
  activeTab.value = 'basicInfo' // 默认显示基本信息标签页

  // 使用nextTick确保DOM更新后再操作
  nextTick(() => {
    // 调用TeacherInfoForm组件的loadFormData方法
    teacherInfoFormRef.value.loadFormData(type, id)
  })
}

// 处理成功提交
const handleSuccess = () => {
  // 数据保存成功后，触发父组件的刷新方法
  emit('success')
}

// 关闭弹窗时的处理
const closed = () => {
  console.log('关闭弹窗')
  teacherId.value = undefined
  activeTab.value = 'basicInfo'
}

// 暴露方法给父组件调用
defineExpose({
  open
})

// 定义事件
const emit = defineEmits(['success'])
</script>
<style lang="scss">
.teacher-dialog {
  .el-dialog__body {
    padding-top: 0 !important;
    overflow: hidden;
  }
}
</style>
<style lang="scss" scoped>
.teacher-dialog-container {
  display: flex;
  flex-direction: column;
}

.teacher-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-content-scroll {
  max-height: 600px;
  min-height: 600px;
  padding: 10px;
  overflow-y: auto;
}
</style>
